import React, {Component} from 'react';
import {
    FlatList, StyleSheet, Text, View, ScrollView,
} from 'react-native';

export default class FlatListBasics extends Component {

    constructor(props) {
        super(props)
        this.state = {
            keepData: ""
        }
    }

    dataJson = [{'name': '许开'}, {'name': '叶航'}
        , {'name': '叶航'}
    ]

    addDataJson() {
        for (var i = 0; i < 20; i++) {
            this.dataJson.push({'name': '叶航'})
        }
    }

    render() {
        this.addDataJson()
        return (
            <View style={styles.container}>
                {/*<ScrollView>*/}
                <FlatList
                    data={this.dataJson}
                    renderItem={
                        ({item}) => (
                            <View>
                                {
                                    this.itemView(item)
                                }
                            </View>
                        )
                    }
                />

                {/*<View style={styles.diversItem}*/}
                {/*/>*/}
                {/*<FlatList*/}
                {/*data={this.dataJson}*/}
                {/*renderItem={*/}
                {/*({item}) => (*/}
                {/*<View>*/}
                {/*{*/}
                {/*this.itemView(item)*/}
                {/*}*/}
                {/*</View>*/}
                {/*)*/}
                {/*}*/}
                {/*/>*/}
                {/*</ScrollView>*/}
            </View>
        );
    }

    itemView(item) {
        if (item.name) {
            return (<View>
                <Text style={styles.item}>
                    {"wo shi " + item.name}
                </Text>
            </View>)
        }
    }


}

//
// class item extends Component{
//     render() {
//         return (
//             <View style={styles.container}>
//                 <Text>
//
//                 </Text>
//             </View>
//         );
//     }
// }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        backgroundColor: '#f00',
        padding: 10,
        fontSize: 18,
        height: 44,
    },
    diversItem: {
        backgroundColor: '#fd0',
        height: 80
    },
})